<template>
	<view style="width: 100%;">
		<view class="u-page">
			<u-loading-page :loading="loading" bg-color="#e8e8e8"></u-loading-page>
			<!-- <u-row customStyle="margin: 10px">
				<u-col span="9"></u-col>
				<u-col span="3">
					<uni-icons @click="handel_plus_click" style="text-align: right;" type="plus" size="30"></uni-icons>
				</u-col>
			</u-row>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="12">
					<u-search style="z-index: 999;" :disabled='true' bgColor="rgb(255 255 255)" placeholder="搜索"
						shape="round" @click="handle_SearchBox_click" :showAction="false" :animation="true"></u-search>
				</u-col>
			</u-row> -->

			<!-- !!修改完成上搜索和添加按钮 9->6 -->
			<view class="top" style="background-color: transparent;">
				<u-row customStyle="margin-bottom: 10px" class="search">
					<u-col span="12">
						<u-search style="z-index: 999;" :disabled='true' bgColor="rgb(255 255 255)" placeholder="搜索"
							shape="round" @click="handle_SearchBox_click" :showAction="false" :animation="true"></u-search>
					</u-col>
				</u-row>
				<view class="userInfoCreate" style="font-size: 30px;padding-bottom: 10px;">
					<!-- 源代码图标大小已未受修改影响 -->
					<u-row customStyle="margin: 10px">
						<u-col span="3"></u-col>
						<u-col span="3" customStyle="padding-top: 1%;" >
							<uni-icons @click="handel_plus_click" style="text-align: right;" type="plus"
								size="30"></uni-icons>
						</u-col>
					</u-row>
				</view>
			</view>

			<!-- <u-popup :show="show" @close="close" @open="open">
				<view style="width: 93%;align-self: center;">
					<u--form labelWidth='auto' labelPosition="left" :model="queryParamsForm" :rules="rules" ref="form1">
						<u-form-item label="长者姓名" prop="name" borderBottom ref="item1">
							<u--input inputAlign='center' shape='square' border="none" v-model="queryParamsForm.name">
							</u--input>
						</u-form-item>
						<u-form-item label="身份证号码" prop="idNumber" borderBottom ref="item1">
							<u--input inputAlign='center' shape='square' border="none" v-model="queryParamsForm.idNumber">
							</u--input>
						</u-form-item>
					</u--form>
					<u-row customStyle="margin:10px">
						<u-col span="12">
							<u-button class="custom-style" type="primary" size="small" @click="handel_search_click">搜索
							</u-button>
						</u-col>
					</u-row>
					<u-row customStyle="margin:10px">
						<u-col span="12">
							<u-button class="custom-style" type="primary" size="small" @click="handel_reset_click">重置
							</u-button>
						</u-col>
					</u-row>
				</view>
			</u-popup> -->

			<!-- !!弹出层样式修改,按钮未修改 -->
			<u-popup :show="show" @close="close" @open="open" round="10">
				<view style="width: 93%;align-self: center;" class="popUpInside">
					<u--form labelWidth='auto' labelPosition="left" :model="queryParamsForm" :rules="rules" ref="form1"
						:labelStyle="inpInfoBox">
						<u-form-item label="长者姓名" prop="name" borderBottom ref="item1"
							labelPosition="top">
							<u--input inputAlign='center' shape='square' border="none" v-model="queryParamsForm.name">
							</u--input>
						</u-form-item>
						<u-form-item label="身份证号码" prop="idNumber" borderBottom ref="item1"
							labelPosition="top">
							<u--input inputAlign='center' shape='square' border="none" v-model="queryParamsForm.idNumber">
							</u--input>
						</u-form-item>
					</u--form>

					<u-row customStyle="margin:10px">
						<u-col span="12">
							<u-button class="custom-style" type="primary" size="small" @click="handel_search_click">搜索
							</u-button>
						</u-col>
					</u-row>
					<u-row customStyle="margin:10px">
						<u-col span="12">
							<u-button class="custom-style" type="primary" size="small" @click="handel_reset_click">重置
							</u-button>
						</u-col>
					</u-row>

				</view>
			</u-popup>

			<u-row customStyle="margin-bottom: 10px ">
				<u-col span="12">
					<u-empty v-if="DataList.length == 0" mode="list"></u-empty>
					<u-cell-group customStyle='background-color: white;' v-else>
						<u-cell v-for="(item, index) in DataList" size="large" isLink clickable :title="getItemTitle(item)"
							:label="getItemLabel(item)" :name=item.id @click="handel_cell_click">
						</u-cell>
					</u-cell-group>
					<uni-load-more :status="status" :contentText="loadText" @clickLoadMore="MyonLoad" />
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
//该页负责：
//1.获取老人信息列表，下拉继续加载
//2.提供条件搜索选项
//3.点击单个老人信息跳转到老人详情
//4.新增录入老人信息
import {
	transformPostBody,
	transformRequestURL
} from "@/utils/requestParams.js";

import {
	GetAgeByIdCard
} from "@/utils/stringFormat.js";

import {
	QueryRTInfoList,
	addRTInfo,
	updateRTInfo,
	getRTInfo,
	delRTInfo,
	QueryRTInfoHistory
} from "@/api/elder/RTInfo.js";

export default {
	name: "index",
	components: {},
	data() {
		return {
			GetAgeByIdCard: GetAgeByIdCard,
			DataList: [],
			total: 0, //条目总数，用户加载更多
			// url参数
			queryParams: {
				pageNum: 1,
				pageSize: 20, //每次加载更多数据量
				startAge: undefined,
				endAge: undefined,
				areaCode: undefined,
			},
			// 表单查询参数
			queryParamsForm: {
				idNumber: undefined,
				name: undefined,
				sex: undefined,
				currentState: undefined,
				selfCareAbility: undefined,
				urbanRural: undefined,
				capabilityAssess: undefined,
				livingStatus: undefined,
				pensionMode: undefined,
				childStatus: undefined,
			},
			rules: {},
			loading: false, //加载中提示框显示
			show: false, //搜索框显示
			finished: false, //加载更多完结
			// status: 'more', // 显示底部提示
			loadText: {
				contentdown: "点击加载更多",
				contentrefresh: "正在加载",
				contentnomore: "没有更多数据了",
			},
			// ---------------------------------------------
			inpInfoBox: {
				fontSize: "large",
				fontWeight: "500",
				width: "100%",
				margin: "0 0 3% 0",
			}
			// ---------------------------------------------
		}
	},
	watch: {},
	computed: {
		status() {
			if (this.DataList.length < this.total) {
				return "more";
			} else {
				this.finished = true;
				return "nomore";
			}
		},
	},
	onShow() {
		//挂载后默认进行第一页的查询，此时没有设置条件
		this.queryParams.pageNum = 1;
		this.getList();
	},
	methods: {
		//条件搜索框
		handle_SearchBox_click() {
			this.show = true
		},
		open() { },
		close() {
			this.show = false
		},
		MyonLoad(e) {
			this.finished = true;
			this.fetch();
			e.detail = {
				status: 'loading'
			};
			return e;
		},
		//条件搜索按钮点击
		handel_search_click() {
			this.finished = false; //重置搜索完结
			this.queryParams.pageNum = 1; //重置搜索页
			this.DataList = [] //清空原结果集
			this.getList();
			this.show = false; //关闭搜索框
		},
		//条件重置按钮点击
		handel_reset_click() {
			this.queryParams = {
				pageNum: 1,
				pageSize: 15, //每次加载更多数据量
				startAge: undefined,
				endAge: undefined,
				areaCode: undefined,
			};
			this.queryParamsForm = {
				idNumber: undefined,
				name: undefined,
				sex: undefined,
				currentState: undefined,
				selfCareAbility: undefined,
				urbanRural: undefined,
				capabilityAssess: undefined,
				livingStatus: undefined,
				pensionMode: undefined,
				childStatus: undefined,
			}
			this.handel_search_click();
		},
		//跳转新增页
		handel_plus_click() {
			this.$tab.navigateTo('/pages/RTInfo/add')
		},
		//跳转详情页
		handel_cell_click(id) {
			this.$tab.navigateTo('/pages/RTInfo/detail?id=' + id.name)
		},
		//加载更多合并结果
		fetch() {
			this.queryParams.pageNum = this.queryParams.pageNum + 1; //加载下一页
			QueryRTInfoList(
				this.queryParams,
				this.queryParamsForm
			).then((response) => {
				if (response.code == 200) {
					this.DataList = this.DataList.concat(
						response.rows.filter((item) => !this.DataList.some((i) => i.id === item.id))
					);
					this.total = response.total;
				}
			});
		},
		//获取老人信息列表
		getList() {
			this.loading = true;
			QueryRTInfoList(
				this.queryParams,
				this.queryParamsForm
			).then((response) => {
				if (response.code == 200) {
					this.DataList = response.rows;
					this.total = response.total;
				}
				this.loading = false;
			});
		},
		//获取老人简介
		getItemTitle(item) {
			let result = "";
			//  "name": "薛荣珍",
			//     "sex": "女",
			//     "age": "87",
			if (item.name) result += item.name + ' '
			if (item.sex) result += item.sex + ' '
			if (item.idNumber) result += GetAgeByIdCard(item.idNumber) + '岁'
			return result
		},
		//获取老人住址
		// "permanentProvince": "山西省",
		// "permanentCity": "威海文登市",
		// "permanentDistrict": "离石区",
		// "permanentTown": "",
		// "permanentVillage": "城东社区",
		// "permanentStreet": "滨河街道",
		// "permanentResidenceAdd": "滨河佳苑后散户5排4院",
		getItemLabel(item) {
			let result = "";
			//if (item.permanentProvince) result += item.permanentProvince
			//if (item.permanentCity) result += item.permanentCity
			if (item.permanentDistrict) result += item.permanentDistrict
			// if (item.permanentTown) result += item.permanentTown
			if (item.permanentStreet) result += item.permanentStreet
			if (item.permanentVillage) result += item.permanentVillage
			if (item.permanentResidenceAdd) result += item.permanentResidenceAdd
			return result
		}
	},
}
</script>

<style lang="scss" scoped>
@import "../../yangLaoAppStyle.scss";

.demo-uni-row {
	margin-bottom: 10px;
	/* QQ、字节小程序文档写有 :host，但实测不生效 */
	/* 百度小程序没有 :host，需要设置block */
	/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
	display: block;
	/* #endif */
}

/* 支付宝小程序没有 demo-uni-row 层级 */
/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
/* #ifdef MP-ALIPAY || MP-WEIXIN */
/deep/ .uni-row {
	margin-bottom: 10px;
}

/* #endif */
.demo-uni-col {
	height: 36px;
	border-radius: 4px;
}


.mypage-title {
	font-size: 20px;
	font-weight: 600;
	align-self: center;
}

.wrap {
	padding: 12px;
}

.demo-layout {
	height: 25px;
	border-radius: 4px;
}

.list-cell {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 24rpx;
	overflow: hidden;
	color: #323233;
	font-size: 14px;
	line-height: 24px;
	background-color: #fff;
}

.custom-style {
	width: 90%;
	font-weight: bolder;
	font-size: 15px;
}
</style>